<template>
  <div class="playlist-detail">
    <Header />
    <div class="player">
      <van-icon name="arrow-left" @click="goBack" />
      <img :src="listInfo.logo" class="player-cover" />
      <h2 class="player-tit">{{listInfo.dissname}}</h2>
      <p class="player-info">
        <img :src="listInfo.headurl" />
        {{listInfo.nick}}
      </p>
      <p class="player-num">播放量：{{toFixed((listInfo.visitnum/10000),1)}}万</p>
    </div>
    <div class="count-box">
      <span>歌单 共{{listInfo.cur_song_num}}首</span>
    </div>
    <div class="song-list">
      <ul>
        <li v-for="item in songList" :key="item.songid" @click="selectSong(item)">
          <h4 class="song-name">{{item.songname}}</h4>
          <p class="song-singer">{{item.singer[0].name}} {{item.albumname}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import Header from "@/components/common/Header.vue";
export default {
  components: {
    Header
  },
  data() {
    return {
      songList: [],
      listInfo: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      axios
        .get("/api/songlist", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(res => {
          //   console.log(res.data);
          this.listInfo = res.data.data;
          this.songList = res.data.data.songlist;
        })
        .catch(err => {
          console.error(err);
        });
    },
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
    toFixed(number, fractionDigits) {
      //number 传入数字
      //fractionDigits 保留小数位数
      var times = Math.pow(10, fractionDigits);
      var roundNum = Math.round(number * times) / times;
      return roundNum.toFixed(fractionDigits);
    },
    selectSong(item) {
      const id = item.songid;
      const mid = item.songmid;
      this.$router.push({
        path:`/Player/${mid}/${id}`,
      });
    }
  }
};
</script>
<style scoped>
.player {
  position: relative;
  padding-top: 75px;
}
.player-cover {
  height: 200px;
  border-radius: 18px;
  box-shadow: 0 7px 13px rgb(0 0 0 / 21%);
}
.van-icon {
  height: 200px;
  line-height: 200px;
  position: absolute;
  top: 75px;
  left: 0;
  z-index: 1;
  font-size: 40px;
  color: #22d59c;
  cursor: pointer;
}
.van-icon:hover {
  background: hsla(161, 72%, 48%, 0.2);
}
.player-tit {
  color: #121212;
  font-weight: normal;
  font-size: 20px;
  margin: 20px 0 15px 0;
}
.player-info {
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  color: #121212;
  margin: 0;
}
.player-info img {
  height: 22px;
  border-radius: 999px;
  vertical-align: -5px;
  margin-right: 3px;
}
.player-num {
  color: gray;
  margin: 10px 0 20px 0;
}
.count-box {
  text-align: left;
  font-size: 12px;
  color: grey;
  padding: 0 15px;
  margin-bottom: 10px;
}
.song-list li {
  box-sizing: border-box;
  padding: 5px 15px;
  cursor: pointer;
}
.song-list li:hover {
  background: hsla(161, 72%, 48%, 0.2);
}
.song-name {
  color: #000;
  font: 18px;
  margin: 0;
  text-align: left;
  font-weight: normal;
  line-height: 30px;
}
.song-singer {
  font-size: 12px;
  margin: 0;
  text-align: left;
  color: rgba(0, 0, 0, 0.4);
  -webkit-user-select: none;
  line-height: 20px;
}
</style>